<template>
    <div id="sql-detail">
        <el-divider>服务名称:{{application}} —————— mapper接口:{{method}}</el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%"
                :stripe="true"
                :border="true"
                size="mini"
                :fit="true"
                :highlight-current-row="true"
                max-height="550">

            <el-table-column
                    prop="id"
                    sortable
                    :show-overflow-tooltip="true"
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="sqlStatement"
                    sortable
                    :show-overflow-tooltip="true"
                    label="sql语句">
            </el-table-column>

            <el-table-column
                    prop="timeConsume"
                    sortable
                    :show-overflow-tooltip="true"
                    label="耗时">
            </el-table-column>

            <el-table-column
                    :show-overflow-tooltip="true"
                    sortable
                    min-width="150px"
                    prop="creator"
                    label="创建人">
            </el-table-column>

        </el-table>

        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="page.size"
                :current-page="page.current"
                @current-change="handlerCurrent"
                @size-change="handlePageSize"
                :total="tableData.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "sql-detail",
        data() {
            return {
                page: {
                    size: 30,
                    current:1,
                    application: '',
                    method: '',
                },
                tableData: {

                },
                application: 'provider-example',
                method: 'cn.org.donald.exampleMapper.selectById'
            }
        },
        methods: {
            handlerCurrent(current) {
                this.page.current = current;
                this.requestData();
            },
            handlePageSize(size) {
                this.requestData();
                this.page.size = size;
            },
            async requestData() {
                const resp = await this.$http.post("/log-sql/getByAndMethod", this.page);
                let data = resp.data;
                if (data.code === 200) {
                    this.tableData = data;
                } else {
                    this.$message.error(data.info);
                }
            }
        },
        created() {
            this.application = this.$route.query.application;
            this.method = this.$route.query.method;
            this.page.method = this.method;
            this.page.application = this.application;
            this.requestData();
        }
    }
</script>

<style scoped>

</style>